<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
    *{
        margin-top: 10px;
    }
    #div1{
        background-color: aqua;
        height: 50px;
    }
    #div2{
        background-color: yellow;
        height: 50px;
    }
    #div3{
        background-color: pink;
        height: 10px;
    }
    #div4{
        margin-top: 20px;
        background-color: lightblue;

    }
    .list{
    
        width: 200px;
        height: 200px;
        border: 1px solid black;
        overflow: auto;
        
    }

    .list li{
        width: 100%;
        height: 100px;
    }
</style>
<body>
<div id="root">
<!--    <a href="https://www.baidu.com" @click.prevent="fang1">百度</a>-->
<!--    <div @click="fang2(1)" id="div1">-->
<!--        <a href="https://www.baidu.com" @click.stop="fang2(2)">百度</a>-->
<!--    </div>-->
<!--    <button @click.once="fang3">点击</button>-->
<!--    <div @click.capture="fang4(1)" id="div2">-->
<!--        外部div-->
<!--        <div @click="fang4(2)" id="div3">-->
<!--            内部div-->
<!--        </div>-->
<!--    </div>-->
<!--    <div @click.self="fang5(2)" id="div4">-->
<!--        <a @click="fang5(1)">点击</a>-->
<!--    </div>-->
    <ul @wheel.passive="fang6" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
    <script>
         new Vue({
             el: '#root',
        methods: {
                 fang6(){
                     for(let i=0;i<100;i++){
                         console.log('#')
                     }
                 },
                 fang5(e){
                     console.log(e)
                 },
                 fang4(msg){
                     console.log(msg)
                 },
            fang1(e){
                alert('阻止了默认事件')
                // e.preventDefault()
            },
            fang2(msg){
                alert(msg)
                // e.stopPropagation()
            },
            fang3(e){
                alert('只会触发一次')
            }
        },

        })
    </script>
</body>
</html>